<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynatree - Example</title>

    <script src='../jquery/jquery.js' type='text/javascript'></script>
    <script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

    <link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
    <script src='../src/jquery.dynatree.js' type='text/javascript'></script>

    <!-- Start_Exclude: This block is not part of the sample code -->
    <link href="prettify.css" rel="stylesheet">
    <script src="prettify.js" type='text/javascript'></script>
    <link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
    <!-- End_Exclude -->
    
<script type='text/javascript'>

    var treeData = [
	    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
	    {title: "item2: selected on init", select: true },
	    {title: "Folder with some children", isFolder: true, key: "id3",
	        children: [
	            {title: "Sub-item 3.1",
	                children: [
	                    {title: "Sub-item 3.1.1", key: "id3.1.1" },
	                    {title: "Sub-item 3.1.2", key: "id3.1.2" }
	                ]
	            },
	            {title: "Sub-item 3.2",
	                children: [
	                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
	                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
	                ]
	            }
	        ]
	    },
	    {title: "Documnent with some children (expanded on init)", key: "id4", expand: true,
	        children: [
	            {title: "Sub-item 4.1 (active on init)", activate: true,
	                children: [
	                    {title: "Sub-item 4.1.1", key: "id4.1.1" },
	                    {title: "Sub-item 4.1.2", key: "id4.1.2" }
	                ]
	            },
	            {title: "Sub-item 4.2 (selected on init)", select: true,
	                children: [
	                    {title: "Sub-item 4.2.1", key: "id4.2.1" },
	                    {title: "Sub-item 4.2.2", key: "id4.2.2" }
	                ]
	            }
	        ]
	    }
	];


    $(function(){
        $("#tree").dynatree({
            persist: true,
            checkbox: true,
            children: treeData,
//          clickFolderMode: 1,
            selectMode: 2,
            onPostInit: function(isReloading, isError) {
                logMsg("onPostInit(): tree:%o, isReloading:%o, isError:%o", this, isReloading, isError);
                logMsg("onPostInit(): tree.isReloading:%o, tree.isInitializing:%o", this.isReloading(), this.isInitializing());
                var persistData = this.getPersistData();
                logMsg("persistData: %o", persistData);
                this.reactivate();
            },
            onActivate: function(dtnode) {
                logMsg("onActivate: %o, userEvent:%o", dtnode, dtnode.tree.isUserEvent());
                $("#echoActive").text(dtnode.data.title);
            },
            onDeactivate: function(dtnode) {
                $("#echoActive").text("-");
            },
            onDblClick: function(dtnode, event) {
                logMsg("onDblClick(%o, %o)", dtnode, event);
                dtnode.toggleExpand();
            }
        });
        logMsg("after widget init: %o", this);
    });
</script>
</head>

<body class="example">
    <h1>TEST: Persist</h1>
    <p class="description">
        Cookie persistence and is enabled here.<br>
        (Also, double-click handler expands document nodes.)<br>
        Select a node and hit [F5] to refresh, to see how the active node and 
        expansion and selection states are restored.<br>    
        <br>
        NOTE: if this doesn't seem to work, it's probably because the frame 
        content is cached by the browser.<br>
        Try this example as an 
        <a href="#" target="_blank">unframed page</a>.
    </p>
    
    <!-- Tree container -->
    <div id="tree"></div>
    <div>Active node: <span id="echoActive">-</span></div>
    
    <!-- Start_Exclude: This block is not part of the sample code -->
    <hr>
    <p class="sample-links  no_code">
        <a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
        <a class="hideOutsideFS" href="#">Link to this page</a>
        <a class="hideInsideFS" href="samples.html">Example Browser</a>
        <a href="#" class="codeExample">View source code</a>
    </p>
    <!-- End_Exclude -->
</body>
</html>
